<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Object.defineProperty</title>
</head>
<body>
    <script>
        //1.字面量定义
        let data={
            name:'lotzinfly'
        }
        data.name='小飞哥'  //这种情况不知道name的属性发生了变化

        //2.Object.defineProperty
        let data1={}
        Object.defineProperty(data1,'name',{
            //当我们访问data1的name属性时自动调用的方法
            //get函数的返回值就是拿到的值
            get(){
                console.log('你访问了data1属性');
                return 'lotzinfly'

            },
            //当我们修改name属性自动调用的函数
            //属性最新值会被当成实参传进来

            set(newValue){
                console.log('你修改了data1属性',newValue);
                //set()只要修改了name属性就会执行
                //如果想要在name变化时 完成一些事情，都可以在这执行
                //1.ajax()
                //2.操作DOM

            },
        })
        //以上是js对象定义的另一种方案，可以在访问属性和设置属性的时候自动调用相应的函数
        //访问属性：data.name
        //设置属性：data.name='小飞哥'


    </script>
</body>
</html>